<template>
    <div class="container">
        <header
            class="header"
            :style="props?.headerStyle"
            :class="headerClassBg"
        >
            <slot name="header"></slot>
        </header>
        <div class="menu-wrapper">
            <nav
                class="menu"
                v-if="props.menu"
                :style="{ height: `${menuHeight}rem` }"
            >
                <slot name="menu"></slot>
            </nav>
            <div v-else class="menu noData">暂无数据</div>
            <div class="content" :style="{ top: `${menuHeight || 100}rem` }">
                <slot name="content"></slot>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    teacher: Boolean,
    student: Boolean,
    parent: Boolean,
    menu: Array,
    headerStyle: String
});

const headerClassBg = computed(() => {
    for (let key in props) {
        if (props[key] === true) {
            return `header--${key}-bg`;
        }
    }
});

const menuHeight = computed(() => {
    if (props.menu) {
        return Math.ceil(props.menu.length / 3) * 100;
    } else {
        return;
    }
});
</script>

<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: rgb(247, 247, 247);
}

.header {
    height: 160rem;
    padding: 20rem;
}

.header--teacher-bg {
    background-image: linear-gradient(
        to bottom,
        rgb(126, 101, 250),
        rgb(168, 180, 254)
    );
}

.header--student-bg {
    background-image: linear-gradient(
        to bottom,
        rgb(11, 123, 250),
        rgb(87, 200, 245)
    );
}

.header--parent-bg {
    background-image: linear-gradient(
        to bottom,
        rgb(81, 108, 228),
        rgb(115, 157, 234)
    );
}

.menu-wrapper {
    position: relative;
    flex: 1;
    background-color: #f7f7f7;
    .menu {
        position: relative;
        transform: translateX(-50%);
        left: 50%;
        top: -40rem;
        background-color: #fff;
        min-height: 100rem;
        width: 335rem;
        box-shadow: 1px 1px 10px rgb(181, 181, 181);
        border-radius: 10px;
    }

    .noData {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16rem;
        color: #999;
        height: 100rem;
    }

    .content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10rem;
        margin-top: -20rem;
        padding: 0 20rem;
    }
}
</style>
